<template>
	<view class="container">
		<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList"
			field="fileUrl,picUrl">
			<view v-if="error">{{error.message}}</view>
			<view v-else-if="data"
				style="display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 20rpx;padding:20rpx">
				<view v-for="(item, index) in data" :key="index" style="text-align: center;">
					<image :src="item.picUrl.url" style="width:100%;border-radius: 10rpx;" mode=""></image>
					<a @click="downloadDocx(item.fileUrl.url)" :href="item.fileUrl.url"
						style="margin:0 auto;display: block;">模板{{index+1}} <uni-icons type="download"></uni-icons></a>
					<!-- {{item}} -->
				</view>

			</view>
			<uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
		</unicloud-db>
		<uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				collectionList: "wordtemp",
				loadMore: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				}
			}
		},
		onPullDownRefresh() {
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.udb.loadMore()
		},
		methods: {
			down(path) {
				let url = encodeURI(path); //注意中文文件名的网络地址需要encodeURI
				uni.downloadFile({
					url, //文件链接
					success: function(res) {
						//statusCode状态为200表示请求成功，tempFIlePath临时路径
						if (res.statusCode == 200) {
							console.log("ccc", res.tempFilePath);
							//保存到本地
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: function(res) {
									//res.savedFilePath文件的保存路径
									//保存成功并打开文件
									uni.openDocument({
										filePath: res.savedFilePath,
										success: (res) => console.log('成功打开文档')
									})
									console.log("bbb", res);
								},
								fail() {
									console.log('打开失败')
								}
							})
						}
						console.log("aaa", res);
					},
					fail() {
						console.log('下载失败')
					}
				})
			},
			 async downloadDocx(path) {  
			      const fileUrl = path; // 替换为你的.docx文件URL  
			  
			      try {  
			        // 调用uni.downloadFile下载文件  
			        const { tempFilePath } = await new Promise((resolve, reject) => {  
			          uni.downloadFile({  
			            url: fileUrl,  
			            success: (res) => {  
			              if (res.statusCode === 200) {  
			                resolve(res);  
			              } else {  
			                reject(new Error('下载失败，状态码非200'));  
			              }  
			            },  
			            fail: (err) => {  
			              reject(err);  
			            }  
			          });  
			        });  
			  
			        // 将文件保存到本地  
			        const saveFilePath = `${uni.env.USER_DATA_PATH}/downloaded_file.docx`; // 你可以更改文件名和路径  
			        await new Promise((resolve, reject) => {  
			          uni.saveFile({  
			            tempFilePath: tempFilePath,  
			            filePath: saveFilePath,  
			            success: () => {  
			              console.log('文件保存成功:', saveFilePath);  
			              uni.showToast({  
			                title: '文件下载并保存成功',  
			                icon: 'success'  
			              });  
			              // 可选：尝试打开文件（可能不起作用，取决于平台）  
			              this.tryOpenFile(saveFilePath);  
			              resolve();  
			            },  
			            fail: (err) => {  
			              console.error('文件保存失败:', err);  
			              reject(err);  
			            }  
			          });  
			        });  
			  
			      } catch (error) {  
			        console.error('下载或保存文件时发生错误:', error);  
			        uni.showToast({  
			          title: '下载失败',  
			          icon: 'none'  
			        });  
			      }  
			    },  
			  
			    // 尝试打开文件（可能需要用户手动操作）  
			    tryOpenFile(filePath) {  
			      // 注意：并非所有平台都支持直接打开.docx文件  
			      // 此方法可能不会在iOS或Android上工作，具体取决于用户设备是否安装了支持打开.docx的应用  
			      uni.openDocument({  
			        filePath: filePath,  
			        fileType: 'docx', // 指定文件类型，但效果可能有限  
			        success: function () {  
			          console.log('尝试打开文件成功');  
			        },  
			        fail: function (err) {  
			          console.error('尝试打开文件失败:', err);  
			          uni.showToast({  
			            title: '无法打开文件',  
			            icon: 'none'  
			          });  
			        }  
			      });  
			    } ,
			handleItemClick(id) {
				uni.navigateTo({
					url: './detail?id=' + id
				})
			},
			fabClick() {
				// 打开新增页面
				uni.navigateTo({
					url: './add',
					events: {
						// 监听新增数据成功后, 刷新当前页面数据
						refreshData: () => {
							this.$refs.udb.loadData({
								clear: true
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>